<script setup>
import {get, post} from '@/utils/request';
import {ref, reactive, onMounted} from "vue";
import * as echarts from 'echarts';
import {parseMonth} from "@/utils/DateUtil.js";
import {useRouter} from "vue-router";

let category = ref(null)
let purchaser = ref(null)
const router = useRouter();


const onClickLeft = () => history.back();

let categoryOption = {
  title: {
    text: '',
    textAlign: 'auto',

  },
  tooltip: {
    trigger: 'item'
  },
  //类型分类
  legend: {},
  toolbox: {},
  //坐标
  grid: {},
  //X轴的命名
  xAxis: [],
  yAxis: [],
  series: [
    {
      name: '产品型号',
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

let purchaserOption = {
  title: {
    text: '',
    textAlign: 'auto',

  },
  tooltip: {
    trigger: 'item'
  },
  //类型分类
  legend: {},
  toolbox: {},
  //坐标
  grid: {},
  //X轴的命名
  xAxis: [],
  yAxis: [],
  series: [
    {
      name: '采购商',
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

const date = new Date();
let year = ref(date.getFullYear());
let month = ref(parseMonth(date.getMonth()));
let prefixMonth = ref(null);
let myechartsCategory;
let myechartsPurchaser;
onMounted(async () => {
  myechartsCategory = echarts.init(category.value);

  //请求统计数据，从后端请求的数据
  let res = await get("/api/book/monthStatistics", {
    ym: date.getFullYear() + "-" + (parseMonth(date.getMonth()))
  });
  categoryOption.series[0].data = res.data.category;  //数据
  myechartsCategory.setOption(categoryOption)


  myechartsCategory.on('click', params => {
    router.push({
      name: 'home', query: {
        name: params.name,
        category: 1,
        activeTab: activeTab.value,
        searchDate: searchDate.value
      }
    })
  })


  myechartsPurchaser = echarts.init(purchaser.value);
  purchaserOption.series[0].data = res.data.purchaser;  //数
  myechartsPurchaser.setOption(purchaserOption);

  myechartsPurchaser.on('click', params => {
    router.push({
      name: 'home', query: {
        name: params.name,
        category: 2,
        activeTab: activeTab.value,
        searchDate: searchDate.value
      }
    })
  })
})

let activeTab = ref('月统计');
const showCalendar = ref(false);
const searchDate = ref([date.getFullYear(), parseMonth(date.getMonth())]);

const onConfirm = async ({selectedValues}) => {
  showCalendar.value = false;
  console.log('1111',)

  let res = await get(selectedValues.length == 1 ? "/api/book/yearStatistics" : "/api/book/monthStatistics", {
    ym: selectedValues.join('-'),
  });
  categoryOption.series[0].data = res.data.category;  //数据
  myechartsCategory.setOption(categoryOption, true)


  let myechartsPurchaser = echarts.init(purchaser.value);
  purchaserOption.series[0].data = res.data.purchaser;  //数
  myechartsPurchaser.setOption(purchaserOption, true)
  year.value = selectedValues[0];
  if (selectedValues.length > 1) {
    month.value = selectedValues[1];
  } else {
    month.value = -1;
  }
};

let columnsType = ['year', 'month']
const onClickTab = async ({title, a}) => {
  if (activeTab.value === title) {
    return
  }
  activeTab.value = title;
  if (title === '月统计') {
    columnsType = ['year', 'month']
    searchDate.value = [date.getFullYear(), parseMonth(date.getMonth())]
  }
  if (title === '年统计') {
    columnsType = ['year']
    searchDate.value = [date.getFullYear()]
  }


  if (columnsType.length <= 1) {
    prefixMonth.value = month.value;
    month.value = -1;
  } else {
    month.value = prefixMonth.value
    prefixMonth.value = null;
  }

  let res = await get(columnsType.length == 1 ? "/api/book/yearStatistics" : "/api/book/monthStatistics", {
    ym: columnsType.length == 1 ? year.value : year.value + "-" + month.value,
  });
  categoryOption.series[0].data = res.data.category;  //数据
  myechartsCategory.setOption(categoryOption, true)
  let myechartsPurchaser = echarts.init(purchaser.value);
  purchaserOption.series[0].data = res.data.purchaser;  //数
  myechartsPurchaser.setOption(purchaserOption, true)
}


</script>

<template>
  <div id="statistics">
    <div class="title">
      <van-nav-bar title="统计" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    </div>
    <van-tabs @click-tab="onClickTab">
      <van-tab title="月统计" name="月统计"></van-tab>
      <van-tab title="年统计" name="年统计"></van-tab>
    </van-tabs>
    <div style="text-align: right;margin-right: 5px;">
      <van-button block type="primary" shape="circle" icon="calendar-o" @click="showCalendar=true">
        选择日期
      </van-button>
    </div>
    <div class="main">
      <h3 style="text-align: center">{{ month == -1 ? year + "年" : year + "年" + month + '月' }}</h3>
      <h4>月统计产品类别统计</h4>
      <div id="category" ref="category"></div>
      <h4 style="margin-top: 50px;">月采购商统计</h4>
      <div id="purchaser" ref="purchaser"></div>
    </div>
    <van-popup v-model:show="showCalendar" position="bottom">

      <van-date-picker v-model="searchDate"
                       :title="columnsType.length==1?'选择年':'选择年月'"
                       @confirm="onConfirm"
                       @cancel="showCalendar = false"
                       :columns-type="columnsType"
      />
    </van-popup>
  </div>
</template>

<style scoped>
.title {
  text-align: center;
}

#category {
  height: 50vh;
}

#purchaser {
  height: 50vh;
}

.main {

  padding: 10px;

  border-radius: 5px;
  height: 500px;
  margin-top: 10px;
}
</style>